/*
 * @Description: Step1-预约时间
 * @Author: ziwei.ma
 * @Date: 2019-07-30 10:17:32
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-08-28 09:56:02
 */
<template>
  <div class="select-time-wrapper flex-v">
    <!-- 两个点 -->
    <div class="flex-h flex-vc flex-hsb">
      <div class="dot baseBgColorNoActive"></div>
      <div class="dot baseBgColorNoActive"></div>
    </div>
    <!-- 出发时间 -->
    <input
      class="public-style start-time fontsize32"
      type="text"
      placeholder="请选择出发时间（必填）"
      readonly="true"
      @click="clickDate('startTime')"
      v-model="startTime"
    >
    <!-- 结束时间 -->
    <input
      class="public-style fontsize32"
      type="text"
      placeholder="请选择结束时间（必填）"
      readonly="true"
      @click="clickDate('endTime')"
      v-model="endTime"
    >
  </div>
</template>

<script>
import { dateFtt } from 'vue-xiaobu-utils'
import { verifyStartTime, verifyEndTime, verifyRightTime } from '../utils/formVerify'
export default {
  components: {

  },
  data() {
    return {
      timeType: '' // 时间类型，点击时间选项后，做判断用的
    }
  },
  computed: {
    startTime() {
      return this.$store.getters.startTime.SHOWDATE
    },
    endTime() {
      return this.$store.getters.endTime.SHOWDATE
    }
  },
  methods: {
    // 点击时间选项，设置时间选择器的标题（并发送给父组件），和时间类型
    clickDate(type) {
      if (type === 'startTime') {
        this.$emit('selectDate', '出发时间')
        this.timeType = 'startTime'
      } else if (type === 'endTime') {
        this.$emit('selectDate', '结束时间')
        this.timeType = 'endTime'
      }
    },

    // 接收父组件传的时间选择器的值，并对时间对象进行转换和存储，然后在父组件调用此方法
    _getTimeValue(dateArr) {
      // 显示的时间
      let showDate = dateFtt('yyyy年MM月dd日 hh:mm', dateArr)
      // 转换为xxxx/xx/xx格式用于转换为时间戳
      let showDateStr = dateFtt('yyyy/MM/dd hh:mm', dateArr)
      // 传给后台的时间戳
      let timestamp = new Date(showDateStr).getTime()
      let dateObj = {
        SHOWDATE: showDate,
        TIMESTAMP: timestamp
      }
      // 根据弹窗时间类型timeType确认存入的是哪个时间
      if (this.timeType === 'startTime') {
        this.$store.dispatch('fetchStartTime', dateObj)
      } else if (this.timeType === 'endTime') {
        this.$store.dispatch('fetchEndTime', dateObj)
      }
    },

    // 校验时间
    _verifyDate() {
      return Promise.all([
        verifyStartTime(this.$store.getters.startTime.TIMESTAMP),
        verifyEndTime(this.$store.getters.endTime.TIMESTAMP),
        verifyRightTime(this.$store.getters.startTime.TIMESTAMP, this.$store.getters.endTime.TIMESTAMP)
      ])
    }
  }
}
</script>

<style scoped>
.select-time-wrapper {
  width: 650px;
  height: 240px;
  border-radius: 8px;
  background-color: #fff;
  padding: 20px 18px 32px;
}
.dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin: 0 30px;
}
.public-style {
  outline: none;
  border: 0px;
  width: calc(100%-64px);
  height: 84px;
  line-height: 84px;
  background-color: #f9f9f9;
  margin: 8px auto;
  padding: 0 32px;
  font-weight: 400;
}
.start-time {
  margin-top: 26px;
}
input::-webkit-input-placeholder {
  color: #999999;
}
</style>
